<template>
	<view class="liveDetailPage" v-if="isLoad">
		<view class="titleContent">
			<view class="title">{{info.liveName}}</view>
			<view>直播老师：{{info.liveTeacher}}</view>
			<view>开播时间：{{info.beginTime}}</view>
			<view>直播平台：{{info.livePlatform}}</view>
		</view>
		<view class="liveDetail">
			<view class="detailTitle" @click="goDetail">直播详情
				<view class="isLiveing" v-if="liveOrNot==='living'">
					<u--image src="/static/logind.gif" shape="square" mode="aspectFill" width="36rpx" height="36rpx">
					</u--image>直播中
				</view>
				<view class="isLiveing liveLink" v-else>
					进入直播
				</view>
			</view>
			<view class="detailInfo">{{info.liveDesc}}</view>
			<view class="detailImage">
				<u--image :src="baseUrl+'/'+info.wxImage" shape="square" mode="aspectFill" width="360rpx"
					height="360rpx"></u--image>
				<view class="wxTalk">微信咨询</view>
				<view class="isMake" v-if="info.isMake==='1'" @click="receiveMessage">预约成功</view>
				<view class="isEnd" v-if="liveOrNot==='end'">直播已结束</view>
			</view>
		</view>
		<view class="btnContent" v-if="info.isMake!=='1' && liveOrNot!=='end'">
			<view :class="info.isMake!=='1'?'liveBtn':'liveBtn already'" @click="receiveMessage(info)">
				{{info.isMake!=="1"?"立即预约":"预约成功"}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				baseUrl: this.$api.baseUrl,
				isLoad: false,
				userId: ""
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: "userInfo",
				success: (userInfo) => {
					this.userId = userInfo.data.id;
					this.$request.get(this.$api.liveDetail, {
						id: option.id,
						userId: this.userId
					}).then(res => {
						this.info = res.result;
						this.isLoad = true;
						uni.hideLoading()
					})
				}
			})
		},
		computed: {
			liveOrNot() {
				if (this.isLoad) {
					if (new Date(this.info.beginTime.replace(/\-/g, "/")).getTime() < new Date().getTime() && new Date(this
							.info.endTime.replace(/\-/g, "/"))
						.getTime() > new Date().getTime()) {
						return 'living';
					} else if (new Date(this.info.beginTime.replace(/\-/g, "/")).getTime() > new Date().getTime()) {
						return 'waiting'
					} else if (new Date(this.info.endTime.replace(/\-/g, "/")).getTime() < new Date().getTime()) {
						return 'end'
					} else {
						return "error"
					}
				} else {
					return ""
				}

			}
		},
		methods: {
			//订阅消息
			receiveMessage(item) {
				if (item.isMake === "1") return;
				uni.requestSubscribeMessage({
					tmplIds: ["KD2ILLav9Cqdzvr142ZMXDegCJohCl63IXCyHjGN9e8"], //数组
					success: (res) => {
						if (res["KD2ILLav9Cqdzvr142ZMXDegCJohCl63IXCyHjGN9e8"] === 'accept') {
							this.$request.post(this.$api.doLive, {
								liveId: item.id,
								userId: this.userId
							}).then(result => {
								uni.hideLoading()
								uni.navigateBack({

								})
								setTimeout(() => {
									uni.showToast({
										title: "预约成功",
										icon: "success"
									})
								})
							})
						}
						if (res["KD2ILLav9Cqdzvr142ZMXDegCJohCl63IXCyHjGN9e8"] === 'reject') {
							uni.showToast({
								icon: "none",
								title: "已取消订阅"
							})
						}
					},
					fail: (err) => {
						if (err.errCode == 20004) {
							console.log('关闭小程序主开关')
						} else {
							uni.showToast({
								icon: "none",
								title: "订阅失败"
							})
						}
					}
				})
			},
			goDetail() {
				uni.navigateTo({
					url: "/pages/liveWebview/liveWebview?id=" + this.info.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.liveDetailPage {
		background-color: #FAFAFA;
		padding-bottom: 140rpx;

		.titleContent {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			background-color: #fff;
			margin: 20rpx 0;
			padding: 20rpx 40rpx;
			line-height: 40rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.liveDetail {
			padding: 20rpx 40rpx;
			background-color: #fff;

			.detailTitle {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;
				align-items: center;

				.isLiveing {
					background: rgb(255, 51, 85);
					padding: 0 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #fff;
					width: 120rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					margin-left: 20rpx;
					border-radius: 30rpx;
					height: 60rpx;
					text-align: center;
				}

				.liveLink {
					justify-content: center;
					background: rgb(0, 85, 255);
				}
			}


			.detailInfo {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				padding-top: 20rpx;
			}

			.detailImage {
				padding: 40rpx 0;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.wxTalk {
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					padding-top: 10rpx;
				}

				.isMake {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #109D19;
					padding-top: 40rpx;
				}

				.isEnd {
					color: #d0d0d0;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					padding-top: 40rpx;
				}
			}
		}


		.btnContent {
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 120rpx;
			background-color: #fff;
			padding-bottom: 40rpx;
			box-shadow: 0px -2rpx 4rpx 1rpx rgba(0, 0, 0, 0.04);

			.liveBtn {
				width: 680rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
				border-radius: 46rpx;
				opacity: 1;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
			}
		}

	}
</style>
